<template>
	<view>
		<!--购物车列表-->
		<!-- <view class="mask" v-if="isShow" @tap="isShow = false"></view> -->
		<view class="cart-list-box" :class="{'fixed':fixed}">
			<view class="cart-cont">
				<view class="fm-left">
					<view class="cart-num">{{totalNum}}</view>
					<image src="../../static/shopping-cart.png" class="img" mode="" @tap="isShow = !isShow"></image>
					<view class="totalAmount">
						总额：￥{{totalAmount}}
					</view>
				</view>
				<view class="cart-cont-box" v-if="isShow && cartListData.length">
					<view class="close-box">
						<view class="close" @tap="isShow = false">
							<image src="../../static/close.png" class="img" mode=""></image>
						</view>
					</view>
					<view class="cart-list" v-for="(i,index) in cartListData" :key="index">
						{{i.goodsName}}
						<view class="g-desc">
							<view class="g-info">
								单价: ￥{{i.unitPrice}}/个 数量: {{i.count}}个 
							</view>
							<view class="shoppingNumber">
								<label class="minute" @click="btn_minute(i,index)">-</label>
								<input class="input" v-model="i.count" />
								<label class="add" @click="btn_add(i,index)">+</label>
							</view>
							<view class="del" @tap="del(i,2,index)">删除</view>
						</view>
					</view>
				</view>
				<text class="go" @tap="goPay">去结算</text>
			</view>
		</view>
		<!--地址弹窗-->
		<uni-popup ref="popupAddr" background-color="#F3ECEF" @change="change" :is-mask-click="false">
			<view class="popup-content">
				<view class="addr-list">
					<view class="hed">
						选择收获地址<view class="close" @tap="addrClose"><image src="../../static/x.png" class="xw"></image></view>
					</view>
					<view class="item" v-for="item in addrList" :key="item.id" @tap="addrs(item)">
						<view class="title">
							{{item.tele}}
						</view>
						<view class="desc">
							{{item.province}}{{item.city}}{{item.district}}{{item.address}}
						</view>
						<image v-show="addrIndex == item.id" src="../../static/check-pay.png" class="check" mode=""></image>
					</view>
					<view class="addr-add-box" v-if="!addrShow" @tap="addrShow = true">
						新增地址
					</view>
					<view class="t-bnt" v-if="!addrShow" @tap="addrSave">
						确定
					</view>
				</view>
				<view class="addr-model" v-if="addrShow">
					<view class="hed">
						<text class="rad"></text>新增地址信息
					</view>
					<view class="v-list">
						<view class="item">
							<view class="left-name">姓名</view>
							<view class="rcont"><input class="uni-input" v-model="form.userName" placeholder="请输入姓名" /></view>
						</view>
						<view class="item">
							<view class="left-name">所在地区</view>
							<view class="rcont">
								<!-- <input class="uni-input" placeholder="请输入所在地区" /> -->
								<!-- <pickerAddress @change="change">{{txt}}</pickerAddress> -->
								<picker mode="region" :value="addrValue" @change="bindTimeChange">
									<view class="uni-input">{{addr}}</view>
								</picker>
							</view>
						</view>
						<view class="item">
							<view class="left-name">详细地址</view>
							<!-- <view class="rcont"><input class="uni-input" placeholder="请输入详细地址" /></view> -->
						</view>
						<view class="item">
							<view class="rcont" style="text-align: left;"><textarea style="height: 80rpx;" class="uni-input" v-model="form.address" placeholder="请输入详细地址" /></view>
						</view>
						<view class="item">
							<view class="left-name">手机号码</view>
							<view class="rcont"><input class="uni-input" v-model="form.tele" placeholder="请输入手机号码" /></view>
						</view>
						<view class="item fc" v-if="false">
							<view class="left-name">验证码</view>
							<view class="rcont fcode">
								<input class="uni-input finput" placeholder="验证码" />
								<view class="get-code" @tap="getCode">{{getCodeText}}</view>
							</view>
						</view>
						<view class="item">
							<view class="left-name">邮编</view>
							<view class="rcont"><input class="uni-input" v-model="form.zip" placeholder="请输入邮编" /></view>
						</view>
					</view>
					<view class="bntx">
						<view class="c" @tap="addrShow = false">
							取消
						</view>
						<view class="s" @tap="save">
							确定
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!--绑定手机号-->
		<uni-popup ref="popupPhone" background-color="#F3ECEF" :is-mask-click="true">
			<bindPhone @EventConfirm="addrClose"/>
		</uni-popup>
	</view>
</template>

<script>
	import {addUserAddr,getUserAddr,verfiyCode} from '@/api/user.js'
	import {getCartList,getSubCart,getAddCart} from '@/api/goods.js'
	import bindPhone from '@/components/bindPhone.vue'
	let flag = true
	export default {
		components:{
			bindPhone
		},
		props:{
			fixed:{
				type: Boolean,
				default: true
			},
			ids:{
				type: [Number,String],
				default: ''
			}
		},
		data() {
			return {
				cartListData: [],
				totalNum: 0,
				isShow: false,
				totalAmount: 0,
				current: 0,
				txt: '选择地址',
				addr: '选择地址',
				addrValue: '',
				form: {
					address: '',
					city: '',
					province: '',
					district: '',
					tele: '',
					zip: '',
					isDefault: 0,
					userName: ''
				},
				addrIndex: '',
				addrList: [],
				defId: '',
				addrShow: false
			};
		},
		methods: {
			init(id) {
				this.defId = id
				this.getCartList()
			},
			//减去商品数量
			btn_minute(item,index) {
				let detriment = this.cartListData;
				let num = detriment[index].count;
				//商品数量>1时，数量可以减少
				if(num > 1) {
					// num = num - 1;
					// detriment[index].count = num;
					//商品数量<1时,商品数量不可减
					this.del(item, 1, index)
				}else{
					uni.showToast({
						title: '商品不能再减少了',
						icon: 'none'
					})
				}
			},
			//添加商品数量   
			btn_add(item,index) {
				// let detriment = this.cartListData;
				// // 强转int类型
				// let num = parseInt(detriment[index].count);
				// detriment[index].count = num;
				//计算添加商品后的总价
				// this.del(item, 1)
				this.getAddCartFn(item)
			},
			// 加入购物车
			getAddCartFn(item){
				getAddCart({count:1, goodsId: item.id}).then((res) => {
					this.getCartList()
				})
			},
			getCartList(){
				getCartList({}).then((res) => {
					if(res && res.goods) {
						let resData = res.goods
						let dataInfo = {};
						this.totalNum = res.count
						this.totalAmount = res.totalAmount
						this.cartListData = resData
						if(resData.length < 1) {
							this.isShow = false
						}
					}
				})
			},
			del(item, type, index){
				if(flag) {
					flag = false
					let count = type == 1 ? 1 : item.count
					getSubCart({count, goodsId:item.id}).then((res) => {
						let detriment = this.cartListData;
						let num = detriment[index].count;
						num = num - 1;
						detriment[index].count = num
						console.log('type',type)
						if(type == 2) {
							this.$emit('EventDelCart', item.id)
						}
						this.getCartList()
						setTimeout(() => {
							flag = true
						},600)
					}).catch((err) => {
						setTimeout(() => {
							flag = true
						},600)
					})
				}
			},
			addrClose(){
				this.$refs.popupAddr.close()
				this.$refs.popupPhone.close()
			},
			// 用户地址列表
			getUserAddrFn(){
				getUserAddr().then((res) => {
					this.addrList = res
				})
			},
			addrs(item){
				this.addrIndex = item.id
			},
			// 添加地址
			save(){
				if(!this.form.userName) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if(!this.form.city) {
					uni.showToast({
						title: '请选择地区',
						icon: 'none'
					})
					return
				}
				if(!this.form.address) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					})
					return
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.tele))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				addUserAddr(this.form).then((res) => {
					this.addrShow = false
					this.getUserAddrFn()
				})
			},
			goPay() {
				let authData = uni.getStorageSync('userInfo') || {}
				// 是否绑定过手机 authStatus 1 已实名  2 未实名
				if(authData.authStatus == 2) {
					this.$refs.popupPhone.open('center')
					return
				}
				
				if(this.cartListData.length <1) {
					uni.showToast({title: '您未将商品加入购物车',icon:"none"});
					return false; 
				}
				
				if(!this.addrIndex){
					this.getUserAddrFn()
					this.$refs.popupAddr.open('bottom')
				}else{
					uni.setStorageSync('orderElementPicLen',[1])
					this.setData()
					uni.navigateTo({
						url: '/pagesB/pay/commodityOrderPay?id=' + this.defId + '&payType=2001&addrId=' + this.addrIndex
					})
					this.addrIndex = ''
				}
				
				
				// this.$emit('EventGoPay',{cartListData:this.cartListData})
			},
			addrSave(){
				if(!this.addrIndex) {
					uni.showToast({title: '请选择地址',icon:"none"});
					return false; 
				}
				this.$refs.popupAddr.close()
				uni.setStorageSync('orderElementPicLen',[1])
				this.setData()
				uni.navigateTo({
					url: '/pagesB/pay/commodityOrderPay?id=' + this.defId + '&payType=2001&addrId=' + this.addrIndex
				})
				this.addrIndex = ''
			},
			setData() {
				let cartData = {
					totalNum: this.totalNum,
					totalAmount: this.totalAmount,
					cartListData: this.cartListData
				}
				
				uni.setStorageSync('cartListData', cartData)
			},
			change(data) {
				this.txt = data.data ? data.data.join('-') : ''
				console.log(this.txt)
			},
			bindTimeChange(e){
				console.log(e.detail)
				this.form.province = e.detail.value[0]
				this.form.city = e.detail.value[1]
				this.form.district = e.detail.value[2]
				this.addrValue = e.detail.code
				this.addr = e.detail.value ? e.detail.value.join('-') : ''
			},
			changePhone(){
				
			},
		}
	}
</script>

<style lang="less" scoped>
.cart-list-box{
	position: static;
	left: 0;
	bottom: 35rpx;
	width: 100%;
	margin-top: 32rpx;
	z-index: 98;
	.cart-cont{
		font-family: PingFangSC-Regular;
		font-size: 36rpx;
		color: #333333;
		display: flex;
		align-items: center;
		position: relative;
	}
	.fm-left{
		flex: 1;
		display: flex;
		align-items: center;
		position: relative;
	}
	.totalAmount{
		margin-left: 30rpx;
		font-size: 28rpx;
		color: #E4919D;
	}
	.cart-list{
		font-size: 30rpx;
		color: #333;
		margin: 0 16rpx;
		// margin-bottom: 15rpx;
		padding: 20rpx 12rpx;
		.g-desc{
			color: #AAAAAA;
			font-size: 25rpx;
			padding-top: 15rpx;
			display: flex;
			align-items: center;
		}
		.g-info{
			flex: 1;
		}
		.del{
			border-radius: 25rpx;
			color: #fff;
			background: #E4919D;
			padding: 6rpx 17rpx;
			display: inline-block;
			font-size: 23rpx;
			float: right;
			margin-right: 15rpx;
		}
	}
	/* 数量加减 */
	.shoppingNumber{
		width: 180rpx;
		height: 50rpx;
		border: 1px solid #929292;
		border-radius: 6rpx;
		display: flex;
		align-items: center;
		margin: 0 20rpx;
	}
	.shoppingNumber input{
		text-align: center;
	}
	/* 减去商品数量 */
	.minute {
		width: 80upx;
		text-align: center;
		line-height: 50rpx;
		font-size: 18px;
		border-right: 1px solid #929292;
	}
	/*文本框*/
	.input {
		width: 80upx;
		text-align: center;
	}
	/* 添加商品数量 */
	.add {
		width: 80upx;
		border-left: 1px solid #929292;
		line-height: 50rpx;
		text-align: center;
		font-size: 18px;
	}
	.cart-cont-box{
		position: absolute;
		left: 50%;
		transform: translate(-50%);
		bottom: 110rpx;
		background: #fff;
		width: 100%;
		border-radius: 8rpx;
		padding: 15rpx 0;
		border: 1rpx solid #ecbdcd;
		.close-box{
			position: relative;
			.close{
				position: absolute;
				top: -36rpx;
				right: -18rpx;
			}
			.img{
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
	.cart-num{
		position: absolute;
		left: 70rpx;
		top: -10rpx;
		color: #fff;
		background-color: #E4919D;
		border-radius: 50%;
		width: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		text-align: center;
		font-size: 22rpx;
	}
	.img{
		width: 82rpx;
		height: 82rpx;
	}
	.go{
		color: #E4919D;
		text-align: right;
		float: right;
	}
}
.fixed{
	position: fixed;
	.cart-cont{
		margin: 0 30rpx;
	}
}
.popup-content{
	border-radius: 24rpx;
}
.addr-add-box{
	text-align: center;
	padding: 15rpx;
	font-size: 25rpx;
}
.addr-list{
	padding: 0 20rpx;
	.hed{
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		padding-top: 15rpx;
		.close{
			float: right;
		}
		.xw{
			width: 28rpx;
			height: 28rpx;
		}
	}
	.title{
		font-size: 28rpx;
		color: #333;
	}
	.desc{
		margin-top: 6rpx;
		color: #999;
		font-size: 24rpx;
	}
	padding-top: 20rpx;
	.item{
		margin-bottom: 18rpx;
		border-bottom: 1rpx solid #ccc;
		padding-bottom: 20rpx;
		position: relative;
	}
	.check{
		position: absolute;
		top: 20rpx;
		right: 0;
		width: 35rpx;
		height: 35rpx;
	}
	.t-bnt{
		width: 320rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		background: #E4919D;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		margin: 45rpx auto;
	}
}
.addr-model{
	width: 640rpx;
	min-height: 784rpx;
	border-radius: 24rpx;
	background: #F3ECEF;
	box-shadow: 0px 8rpx 20rpx 0px rgba(235, 141, 167, 0.35);
	// position: absolute;
	// left: 50%;
	// top: 15%;
	// margin-left: -320rpx;
	margin: 0 auto;
	margin-bottom: 50rpx;
	padding: 15rpx;
	.hed{
		font-size: 28rpx;
		color: #AAAAAA;
		margin: 32rpx;
		margin-bottom: 50rpx;
		.close{
			float: right;
		}
		.xw{
			width: 28rpx;
			height: 28rpx;
		}
	}
	.rad{
		width: 29rpx;
		height: 29rpx;
		border: 1rpx solid #AAAAAA;
		display: inline-block;
		border-radius: 50%;
		margin-right: 12rpx;
		position: relative;
		top: 7rpx;
	}
	.v-list{
		margin: 32rpx;
		.item{
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			border-bottom: rgba(170, 170, 170, 0.2) 1rpx solid;
			padding-bottom: 30rpx;
			font-size: 24rpx;
		}
		.left-name{
			width: 180rpx;
		}
		.rcont{
			flex: 1;
			text-align: right;
			input,textarea{
				font-size: 25rpx
			}
		}
		.fcode{
			display: flex;
			align-items: center;
		}
		.finput{
			flex: 1;
			margin-right: 50rpx;
		}
		.get-code{
			background-color: #666;
			border-radius: 25rpx;
			color: #fff;
			width: 170rpx;
			text-align: center;
			padding: 12rpx 0;
		}
	}
	.bntx{
		.c,.s{
			display: inline-block;
			width: 50%;
			font-size: 34rpx;
			color: #AAAAAA;
			text-align: center;
			padding: 15rpx 0;
		}
		.s{
			color: #E4919D;
		}
	}
}
.mask{
	position: fixed;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.2);
	z-index: 1;
}
</style>
